<h1 style="font-size: 50px" >Total Acompte :<span id="total_acompte" style="color: red;font-size: 50px">0.000</span></h1>
<form class="form-horizontal" >

    <div class="form-row row-fluid">
        <div class="row-fluid">
            <label class="form-label span4" for="normal">Type Paiement :</label>
            <select id="type_accompte">
                <option  value="espece">Espece</option>
                <option value="cheque">Cheque</option>
                <option value="effet">Effet</option>
            </select>
        </div>
        <div style="display: none"  class="row-fluid accompte_par_document">
            <label class="form-label span4" for="normal">Compte Client :</label>
            <select id="compte_client">
                <option value=""></option>
                {% for compte in client.comptes %}
                <option  value="{{compte.id}}">{{compte.rib}}</option>
                        {% endfor %}
            </select><a class="form_compte" href="javascript:addCompte()">add</a><label id="compte_banquaire" class="error"></label>
        </div>
        <div  style="display: none" class="row-fluid form_compte_contenu">
            <label class="form-label span4" for="normal">Rib :</label>
            <input type="text" id="compte_rib" class="span4 text"/><label id="compte_rib_error" class="error"></label>
        </div>
        <div  style="display: none" class="row-fluid form_compte_contenu">
            <label class="form-label span4" for="normal">Banque :</label>
            <input type="text" id="compte_banque" class="span4 text"/><label id="compte_banque_error" class="error"></label>
            <button class="btn" type="button" onclick="$('.form_compte_contenu').hide()">Annuler Ajout compte</button>
        </div>
        <div style="display: none" class="row-fluid accompte_par_document">
            <label class="form-label span4" for="normal">Numero Piece :</label>
            <input type="text" id="numero_cheque" class="span4 text"/><label id="numero_cheque_error" class="error"></label>
        </div>
        <div style="display: none" class="row-fluid accompte_par_document">
            <label class="form-label span4" for="normal">Date Echeance :</label>
            <input type="text" id="date_echeance" class="span4 text"/><label id="date_echeance_error" class="error"></label>
        </div>
        <div class="row-fluid">
            <label class="form-label span4" for="normal">Montant :</label>
            <input type="text" id="montant_accompte" class="span4 text"/><label id="montant_accompte_error" class="error"></label>
        </div>

    </div>
    <div class="form-actions">
        <button class="btn btn-info" onclick="accompte()" type="button">Valider</button>
        <button class="btn" type="button" onclick="$('#cboxClose').click()">Annuler</button>
    </div>
</form>
<div class="span12" style="width: 100%;margin-top: 10px;margin-left: 0px">
    <div class="box gradient">
        <div class="title" style="text-align: center">
            <h4>List Accomptes</h4>
        </div>
        <div class="content noPad clearfix">
            <table id="table_facture" cellpadding="0" cellspacing="0" border="0" class="responsive  display table table-bordered" width="100%">
                <thead>
                    <tr >
                        <th>Type</th>
                        <th>Montant</th>
                        <th>Numero pience</th>
                        <th>Date Echeance</th>
                    </tr>
                </thead>
                <tbody id="list_accompte">

                </tbody>
            </table>
        </div>
    </div>
    <div class="form-actions">
        <button class="btn btn-info" onclick="saveAccompte()" type="button">Valider</button>
        <button class="btn" type="button" onclick="$('#cboxClose').click()">Annuler</button>
    </div>
</div>
</div>
<div id="form_compte"></div>
<div id="form_compte_contenu">

</div>
<script>
    index = 0
    function addCompte() {
        $('.form_compte_contenu').show()
    }
    $('#type_accompte').change(function() {
        if ($(this).val() == 'espece') {
            $('.accompte_par_document').hide()
            $('#montant_accompte').spinner("enable");
        } else
        {
            $('.accompte_par_document').show()
            $('#montant_accompte').spinner("enable");
        }

    })

</script>
